<template>
  <div class="member">
    <div style="margin-bottom:10px">
      <el-space>
        <el-select v-model="findFrom.status" class="m-2" placeholder="请选择用户状态" prop='status'>
          <el-option v-for="item in optionsStatus" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="findFrom.level" class="m-2" placeholder="请选择用户会员等级">
          <el-option v-for="item in optionsLevel" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="findFrom.gender" class="m-2" placeholder="请选择用户性别">
          <el-option v-for="item in optionsGender" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input v-model="findFrom.id" placeholder="请输入用户ID" size="default" />
        <el-input v-model="findFrom.nickname" placeholder="请输入昵称" size="default" />
        <el-button type="primary" :icon="Search"  @click="initData()">查找</el-button>
      </el-space>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
      <el-table-column label="用户Id" prop="id" sortable>
      </el-table-column>
      <el-table-column label="昵称" prop="nickname">
      </el-table-column>
      <el-table-column label="手机号码" prop="phone" width="150">
      </el-table-column>
      <el-table-column label="性别" prop="gender">
        <template #default="scope">
          <el-tag class="ml-2">
            {{scope.row.gender==2?'男':'女'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="会员等级" prop="level">
        <template #default="scope">
          <el-tag class="ml-2">
            {{scope.row.level?'VIP会员':'普通会员'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="生日" prop="birthday" width="150">
        <template #default="scope">
          <el-tag class="ml-2">
            {{scope.row.birthday?new Date(scope.row.birthday).birthday():'-'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template #default="scope">
          <el-tag class="ml-2">
            {{scope.row.status?'冻结':'激活'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="上次登录时间" prop="gmtCreate" width="150">
        <template #default="scope">
          <el-tag class="ml-2">
            {{new Date(scope.row.gmtCreate).logTime()}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="上次登录IP" prop="lastLoginIp">
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template #default="scope">
          <el-button size="small" :type="scope.row.status?'primary':'warning'" @click="handleActivate( scope.row)">
            {{scope.row.status?'激活':'冻结'}}
          </el-button>
          <el-button size="small" type="primary"  @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Paging v-bind="pageData" @pageChang="pageChang"></Paging>
    <!-- 添加弹出框 -->
    <el-dialog v-model="dialogFormVisible" title="修改'" :destroy-on-close="true">
      <el-form :model="form" ref="formRef">
        <el-form-item label="用户昵称" :label-width="formLabelWidth" prop='nickname' :rules='[{required:true,message:"用户昵称"}]'>
          <el-input v-model.trim="form.nickname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户手机号码" :label-width="formLabelWidth" prop='phone' :rules='[{required:true,message:"请输入手机号"},{ pattern: /^1[3|5|7|8|9]\d{9}$/, message:"请输入正确的号码格式",trigger: "blur"}]'>
          <el-input v-model.trim="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth" prop='password' :rules='[{required:true,message:"请输入密码"},{pattern:/^[a-zA-Z0-9]{6,11}$/,message:"请输入6~11位的英文或数字"}]'>
          <el-input v-model.trim="form.password" autocomplete="off" type="password" />
        </el-form-item>
        <el-form-item label="用户性别" :label-width="formLabelWidth" prop="gender" :rules='[{required:true,message:"请选择用户性别"}]'>
          <el-select v-model="form.gender" placeholder="请选择">
            <el-option :label="item.label" :value="item.value" v-for="item in optionsGender.slice(0,2)" :key="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户等级" :label-width="formLabelWidth" prop="level" :rules='[{required:true,message:"请选择用户等级"}]'>
          <el-select v-model="form.level" placeholder="请选择">
            <el-option :label="item.label" :value="item.value" v-for="item in optionsLevel.slice(0,2)" :key="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态" :label-width="formLabelWidth" prop="status" :rules='[{required:true,message:"请选择用户状态"}]'>
          <el-select v-model="form.status" placeholder="请选择">
            <el-option :label="item.label" :value="item.value" v-for="item in optionsStatus.slice(0,2)" :key="item.value" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="newly('formRef')">修改</el-button>
          <el-button @click="dialogFormVisible=false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { post } from "@/utils/http";
import Paging from "@/components/Paging/Paging.vue";
import { Search } from '@element-plus/icons-vue';
import { debounce } from "@/utils/debounce";
export default {
  components: {
    Paging,
  },
  setup() {
    return {
      Search
    }
  },
  data() {
    return {
      dialogFormVisible: false,  //弹出框显示
      formLabelWidth: '140px',
      optionsStatus: [  //状态选择框
        { label: '冻结', value: 0 },
        { label: '激活', value: 1 },
        { label: '全部', value: '' }
      ],
      optionsLevel: [  //会员选择框
        { label: '普通会员', value: 0 },
        { label: 'VIP会员', value: 1 },
        { label: '全部', value: '' }
      ],
      optionsGender: [  //性别选择框
        { label: '男', value: 2 },
        { label: '女', value: 1 },
        { label: '全部', value: '' }
      ],
      findFrom: {
        status: null, //搜索状态
        level: null, //搜索会员
        gender: null,  //搜索性别
        id: '',  //搜索id
        nickname: '',  //搜索昵称
      },
      tableData: [],  //表格列表
      pageData: {  //分页数据
        total: 0, //总条数
        currentPage: 1,  //页数
        pageSize: 10  //每页条数
      },
      form: { //修改数据
        nickname: '',
        gender: '',
        phone: '',
        password: '',
        level: '',
        status: ''
      }
    }
  },
  methods: {
    initData() {
      this.axios.post('/lgywsoft/getStockListPage.action ',{}).then(res=>{
        console.log(res,'rrrrrrr');
      })
      let data = {
        _gp: "admin.user", _mt: 'list', id: this.findFrom.id, nickname: this.findFrom.nickname,
        level: this.findFrom.level, gender: this.findFrom.gender, status: this.findFrom.status, pageNo: this.pageData.currentPage, limit: this.pageData.pageSize
      }
      post(data).then(res => {
        if (200 == res.errno) {
          this.tableData = res.data.items
          this.pageData.total = res.data.total
        } else {
          ElMessage.warning(res.errmsg)
        }
      })
    },
    // 分页
    pageChang(e) {
      Object.assign(this.pageData, e)
      this.initData()
    },
    // 编辑
    handleEdit(row) {
      Object.assign(this.form, row)
      this.dialogFormVisible = true
    },
    // 修改
    newly(formRef) {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          post({ _gp: 'admin.user', _mt: 'edit', user: JSON.stringify(this.form) }).then(res => {
            if (200 == res.errno) {
              this.dialogFormVisible = false
              ElMessage.success('成功')
              this.initData()
            }
          })
        }
      })
    },
    // 激活
    handleActivate: debounce(function (row) {
      let status = row.status ? 0 : 1
      post({ _gp: 'admin.user', _mt: 'editStatus', userId: row.id, status: status }).then(res => {
        if (200 == res.errno) {
          ElMessage.success(status ? '冻结成功' : '激活成功')
          this.initData()
        }
      })
    }, 500)
  },
  created() {
    this.initData()
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 180px;
}
</style>